<template>
    <!-- 控制tab的行菜单 -->
    <ul class="tab-menu">
      <li
        v-for="(item, index) in menuList"
        @click="handMenuClick(index, item)"
        class="pointer"
        :class="{ isActive: tabIndex === index }"
        :key="index"
      >
        <span v-if="mode === 'menu'">{{ item }}</span>
        <span v-else-if="mode === 'router'">{{ item.name }}</span>
      </li>
    </ul>
  </template>
  
  <script>
  export default {
    props: {
      menuList: {
        /* [menuName1,menuName2] */
        /* [{path:'/xxx',name:'xxx'}] */
        type: Array,
        required: true
      },
      mode: {
        /* menu/router */
        type: String,
        default: 'menu'
      }
    },
    data() {
      return {
        tabIndex: 0
      }
    },
    watch: {
      '$route.path': {
        immediate: true,
        handler(val) {
          if (this.mode === 'router') {
            this.tabIndex = this.menuList.findIndex((item) => item.path === val)
          }
        }
      }
    },
    methods: {
      handMenuClick(index, item) {
        if (this.mode === 'menu') {
          this.tabIndex = index
          this.$emit('menuClick', index)
        } else if (this.mode === 'router') {
          if (this.$route.path !== item.path) {
            this.$router.push(item.path)
          }
        }
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .tab-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  
    li {
      margin: 10px;
  
      &.isActive {
        font-size: 18px;
        font-weight: bold;
  
        &::after {
          display: block;
          content: '';
          height: 4px;
          width: 90%;
          margin: 0 auto;
          background-color: #ec4141;
          border-radius: 2px;
        }
      }
    }
  }
  </style>